<template>
    <div class="goodsListOut">
        <!-- 面包屑 -->
        <el-card>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
        <!--内容区域 -->
        <el-card>

            <!-- 搜索和添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入订单编号" class="input-with-select" v-model="selectOrder.order_code" clearable
                        @clear="search()">
                        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="selectOrder.order_status" placeholder="状态选择" @change="selectedChange">
                        <el-option v-for="item in selectOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="success" @click="reset">刷新</el-button>
                </el-col>
            </el-row>
            <!-- 数据区域 -->
            <el-table :data="orderList" style="width: 100%" :border="true" :stripe="true">
                <el-table-column type="index" label="序号" align='center'></el-table-column>
                <el-table-column prop="order_code" label="订单编号" align='center'></el-table-column>
                <el-table-column prop="userId" label="用户ID" align='center'></el-table-column>
                <el-table-column prop="" label="支付方式" align='center'>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.payment_way == 1" type="success">微信</el-tag>
                        <el-tag v-if="scope.row.payment_way == 2">支付宝</el-tag>
                        <el-tag v-if="scope.row.payment_way == 0" type="danger">未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="订单金额" align='center'>
                    <template slot-scope="scope">
                        {{ (scope.row.total_amount).toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" align='center'>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.order_status == 1" effect="dark">待支付</el-tag>
                        <el-tag v-if="scope.row.order_status == 2" effect="dark">待发货</el-tag>
                        <el-tag v-if="scope.row.order_status == 3" effect="dark">待收货</el-tag>
                        <el-tag v-if="scope.row.order_status == 4" effect="dark">已收货</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="addTime" label="创建时间" align='center' :formatter="dateFormat"></el-table-column>
                <el-table-column label="订单操作" align='center' min-width="100px">
                    <template slot-scope="scope">
                        <el-button type="danger" v-if="scope.row.order_status == 1" size="small"
                            @click="editOrder(scope.row)">删除订单</el-button>
                        <el-button type="success" v-if="scope.row.order_status == 2" size="small"
                            @click="editOrder(scope.row)">确认发货</el-button>
                        <el-button type="primary" v-if="scope.row.order_status == 3" size="small"
                            @click="editOrder(scope.row)">确认收货</el-button>
                        <!-- <el-button type="primary" v-if="scope.row.order_status == 3" size="small">查看物流</el-button> -->
                        <el-button type="danger" v-if="scope.row.order_status == 4" size="small"
                            @click="editOrder(scope.row)">删除订单</el-button>
                        <el-button type="primary" size="small"
                            @click="openSelectOrderDialog(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="selectOrder.currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="selectOrder.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 查看详情弹窗组件 -->
        <selectOrderDialog ref="selectOrderDialogRef" />
    </div>
</template>

<script>
import { selectOrderAdmin, delOrderByOrder_code, updateOrder } from '@/api/order/order'
import selectOrderDialog from '@/components/order/selectOrderDialog.vue'
export default {
    data() {
        return {

            //订单数据列表
            orderList: [],
            //状态值
            selectOptions: [
                {
                    value: '',
                    label: '全部'
                }, {
                    value: '1',
                    label: '待支付'
                }, {
                    value: '2',
                    label: '待发货'
                }, {
                    value: '3',
                    label: '待收货'
                }, {
                    value: '4',
                    label: '已收货'
                }
            ],
            //查询订单参数，注意：状态参数和编号参数，二选一
            selectOrder: {
                //订单状态参数
                order_status: '',
                //订单编号参数
                order_code: '',
                //第几页
                currentPage: 1,
                //一页显示几条数据，默认5条
                pageSize: 5,
            },
            //数据总数量
            total: null
        }
    },
    methods: {
        //点击操作订单
        editOrder(row) {
            let OrderData = {
                order_code: row.order_code,
                order_status: row.order_status
            }
            this.$confirm('确认执行此操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                if (row.order_status === 1 || row.order_status === 4) {
                    delOrderByOrder_code(OrderData.order_code).then(res => {
                        if (res.data.status == 0) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getData()
                        }
                    })
                }
                if (row.order_status === 2 || row.order_status === 3) {
                    updateOrder({ order_status: row.order_status + 1, order_code: row.order_code }).then(res => {
                        if (res.data.status == 0) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.getData()

                        }
                    })
                }

            }).catch(() => { })
        },
        //打开查看详情的弹窗
        openSelectOrderDialog(row) {
            const { tel, details, city, name, order_status, order_code } = row
            this.$refs.selectOrderDialogRef.dialogVisible = true //弹窗状态
            this.$refs.selectOrderDialogRef.orderDtailList = row.list //商品信息数据
            this.$refs.selectOrderDialogRef.orderAddres = { tel, details, city, name, order_status, order_code }//地址以及订单相关信息
        },
        //点击搜索以及清空关键字内容时触发
        search() {
            this.selectOrder.order_status = ''
            this.getData()
        },
        handleCurrentChange(newPage) {
            this.selectOrder.currentPage = newPage
            this.getData()
        },
        //改变页面的显示数据数量
        handleSizeChange(newSize) {
            this.selectOrder.pageSize = newSize
            this.getData()
        },
        //刷新
        reset() {
            location.reload()
        },
        //状态选择发生改变
        selectedChange() {
            this.selectOrder.order_code = ''//清空编号
            this.getData()
        },
        //获取数据
        async getData() {
            await selectOrderAdmin(this.selectOrder).then(res => {
                if (res.data.status == 0) {
                    this.orderList = res.data.data
                    this.total = res.data.totalpage
                }
            })
        },
        // 编写日期格式化方法
        dateFormat: function (row) {
            const date = row.addTime
            if (!date) {
                return ''
            }
            // 这里的格式根据需求修改
            return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
        },
    },
    components: {
        selectOrderDialog
    },
    created() {
        this.getData()
    }
}

</script>

<style></style>